<template>
	<view class="familyBox">
		<view class="familyMsg" v-for="item in familyTeam" @click="toRecordDetail(item)">
			<view>
				<image :src="item.otherId.avatar" style="border-radius: 12px;"></image>
			</view>
			<view class="rightBox">
				<view>
					<text style="font-size: 18px;margin-right: 20rpx;">{{item.otherId?.name}}</text>
					<up-tag :text="item.relationship" shape="circle" bgColor="#fa746b" size="mini"
						border-color="#fa746b"></up-tag>
					<!-- 
					<up-tag text="默认成员" shape="circle" bgColor="#28d094" size="mini"
						style="margin-left: 20rpx;"></up-tag> -->
				</view>
				<view style="font-size: 12px; color:#999;margin: 15rpx 0;">
					{{item.otherId.gender ?'男' :'女'}}
					{{ new Date().getFullYear() - new Date(item.otherId.birthday).getFullYear() }}岁
				</view>
				<!-- <view style="font-size: 12px; color:#999">
					签约团队：李明明
				</view> -->
			</view>
		</view>
		<view class="commitBtn">
			<button @click="addMenber()">+新增家庭成员</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		// onLoad
		onShow
	} from "@dcloudio/uni-app"
	import {
		searchMemberApi
	} from '../../../api/home-member';
	import {
		getUserInfoApi
	} from '../../../api/login';
	import {
		useUserStore
	} from '../../../store/user';

	const userStore = useUserStore();

	const uid = ref('')

	function addMenber() {
		uni.navigateTo({
			url: '/homepackge/pages/new-record/new-record'
		})
	}

	function toRecordDetail(item) {
		uni.navigateTo({
			url: `/homepackge/pages/delete-update-record/delete-update-record?item=${JSON.stringify(item)}`
		})
	}



	const familyTeam = ref({})


	onShow(() => {
		getUserInfo()
	})




	// 查询家庭成员
	const accSearchTeam = async () => {
		const res = await searchMemberApi({
			ownId: uid.value
		})
		if (res.code == 200) {
			familyTeam.value = res.data
			console.log("familyTeam", res);

			familyTeam.value.unshift({
				relationship: '本人',
				otherId: userStore.userInfo
			});

			console.log(familyTeam.value);
		}
	}



	// 获取用户信息id
	const getUserInfo = async () => {
		const res = await getUserInfoApi()
		if (res.code === 200) {
			console.log(res);

			uid.value = res.data._id
			// console.log(uid.value);

			accSearchTeam()
		}
	}
</script>

<style lang="scss" scoped>
	.rightBox {
		display: flex;
		flex-direction: column;
		margin-top: 35rpx;

	}

	.familyMsg {
		display: flex;
		height: 228rpx;
		// margin-top: 40rpx;
		background-color: #fff;
		margin: 0 40rpx;
		// border: 1px solid;
		margin-bottom: 40rpx;
		border-radius: 16px;
		box-shadow: 1px 1px 1px #eee;

		image {
			width: 160rpx;
			height: 160rpx;
			margin: 30rpx;
		}
	}




	.commitBtn {
		height: 160rpx;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		background-color: #fff;

		button {
			// margin: 0 40rpx;
			border-radius: 10px;
			background: #2984f8;
			font-size: 16px;
			color: #fff;
			margin-top: 10rpx;
			width: 100%;
		}
	}

	.familyBox {
		padding-top: 40rpx;
		background-color: #f0f8ff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// button {
		// 	margin: 0 40rpx;
		// 	border-radius: 10px;
		// 	background: #2984f8;
		// 	font-size: 16px;
		// 	color: #fff;
		// 	margin-top: 10rpx;
		// }
	}
</style>